<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摸鱼日记</title>
</head>
<style>
    body {
        background-image: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        min-height: 100vh;
        color: #fff;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    /* flex布局 */
    .flex {
        display: flex;
    }

    .flex-colum {
        flex-direction: column;
    }

    .justify-center {
        justify-content: center;
    }

    .align-center {
        align-items: center;
    }

    .title {
        display: flex;
        justify-content: center;
    }

    .content {
        display: flex;
        flex-direction: column;
        padding: 10px 200px;
    }

    .tip {
        display: flex;
        padding: 10px 200px;
    }

    .today {
        display: inline;
    }

    .tag {
        color: rgb(163, 0, 0);
        display: contents;
    }

    /* 设置页面 */
    .settings {
        margin-left: 25%;
    }

    .my-2 {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .save {
        display: flex;
    }

    .save button {
        border: none;
        width: 100px;
        height: 30px;
        font-size: 16px;
        border-radius: 15px;
        padding: 10px auto;
        background-color: #00b0ff;
        color: #fff;
        margin-right: 5px;
    }

    .settings input {
        text-align: center;
        border: 0;
        outline: 0;
        height: 20px;
        width: 60px;
        border-radius: 20px;
        margin: 0 5px;
    }

    #goOffWorkTxt {
        display: flex;
        align-items: center;
        font-size: 20px;
    }

    #countDown {
        display: flex;
        flex-direction: column;
        font-size: 20px;
    }

    .sec {
        color: crimson;
        font-size: 30px;
    }

    .line {
        /* display: contents; */
        display: flex;
        align-items: center;
    }

    /* 数字闪烁 */
    .flashing {
        font-size: 20px;
        color: #ca0000;
        padding-right: 5px;
        animation: twinkling 1s infinite ease-in-out;
        -webkit-animation: twinkling 1s infinite ease-in-out;
    }

    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    @-webkit-keyframes twinkling {
        0% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes twinkling {
        0% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }

    /* 自定义按钮 */
    .add-box {
        display: flex;
    }
</style>

<body>
    <div id="main">
        <div class="title">
            <h1 id="titleTxt">摸鱼日记</h1>
        </div>
        <div>
            <div class="tip">今天是 <span id="today"></span></div>
            <div class="tip" id="tip"></div>
            <div class="tip" id="goOffWorkTxt">下班倒计时:00:00:00</div>
            <div class="tip" id="countDown"></div>
            <div class="content" id="content"></div>
            <div id="set1"></div>
        </div>
    </div>
    <div id="settings" class="settings">
        <h1>设置页面</h1>
        <div class="my-2">自定义标题内容： <input type="text" id="title" oninput="commonChange(event)"></div>
        <div class="my-2">自定义字体颜色： <input type="text" id="fontColor" oninput="commonChange(event)"></div>
        <div class="my-2">自定义背景图片： <input type="text" style="width:300px" id="backgroundImage"
                oninput="commonChange(event)"></div>
        <div class="my-2">下班时间：每天 <input type="number" id="hour" oninput="change(event)"> 点 <input type="number"
                id="min" oninput="change(event)">
            分</div>
        <div class="my-2">工资时间：每月 <input type="number" id="date" oninput="change(event)"> 号</div>
        <div class="my-2">上班天数：每周 <input type="number" id="workDay" oninput="change(event)"> 天</div>
        <div class="my-2">提示话术： <textarea style="width: 240px;height: 60px;" id="tipText"
                oninput="change(event)"></textarea>
        </div>
        <div id="custBox"></div>
        <div>新增自定义提示</div>
        <div class="add-box">
            <div class="save my-2" id="addDate"><button type="button" onclick="addCustom('date')">+日期</button></div>
            <div class="save my-2" id="addTime"><button type="button" onclick="addCustom('time')">+时间</button></div>
            <div class="save my-2" id="addDay"><button type="button" onclick="addCustom('day')">+阳历天</button></div>
            <div class="save my-2" id="addDay2"><button type="button" onclick="addCustom('day2')">+阴历天</button></div>
        </div>
        <div class="save my-2" id="saveBtn"><button type="button" onclick="saveSetting()">保存</button></div>
        <div id="set"></div>
</body>
<script>
    /**用法
     * Lunar.toSolar(2016, 6, 3); 农历转化公历
     * Lunar.toLunar(2016, 7, 6); 公历转化农历
     */
    var Lunar = {
        MIN_YEAR: 1891,
        MAX_YEAR: 2100,
        lunarInfo: [
            [0, 2, 9, 21936], [6, 1, 30, 9656], [0, 2, 17, 9584], [0, 2, 6, 21168], [5, 1, 26, 43344], [0, 2, 13, 59728],
            [0, 2, 2, 27296], [3, 1, 22, 44368], [0, 2, 10, 43856], [8, 1, 30, 19304], [0, 2, 19, 19168], [0, 2, 8, 42352],
            [5, 1, 29, 21096], [0, 2, 16, 53856], [0, 2, 4, 55632], [4, 1, 25, 27304], [0, 2, 13, 22176], [0, 2, 2, 39632],
            [2, 1, 22, 19176], [0, 2, 10, 19168], [6, 1, 30, 42200], [0, 2, 18, 42192], [0, 2, 6, 53840], [5, 1, 26, 54568],
            [0, 2, 14, 46400], [0, 2, 3, 54944], [2, 1, 23, 38608], [0, 2, 11, 38320], [7, 2, 1, 18872], [0, 2, 20, 18800],
            [0, 2, 8, 42160], [5, 1, 28, 45656], [0, 2, 16, 27216], [0, 2, 5, 27968], [4, 1, 24, 44456], [0, 2, 13, 11104],
            [0, 2, 2, 38256], [2, 1, 23, 18808], [0, 2, 10, 18800], [6, 1, 30, 25776], [0, 2, 17, 54432], [0, 2, 6, 59984],
            [5, 1, 26, 27976], [0, 2, 14, 23248], [0, 2, 4, 11104], [3, 1, 24, 37744], [0, 2, 11, 37600], [7, 1, 31, 51560],
            [0, 2, 19, 51536], [0, 2, 8, 54432], [6, 1, 27, 55888], [0, 2, 15, 46416], [0, 2, 5, 22176], [4, 1, 25, 43736],
            [0, 2, 13, 9680], [0, 2, 2, 37584], [2, 1, 22, 51544], [0, 2, 10, 43344], [7, 1, 29, 46248], [0, 2, 17, 27808],
            [0, 2, 6, 46416], [5, 1, 27, 21928], [0, 2, 14, 19872], [0, 2, 3, 42416], [3, 1, 24, 21176], [0, 2, 12, 21168],
            [8, 1, 31, 43344], [0, 2, 18, 59728], [0, 2, 8, 27296], [6, 1, 28, 44368], [0, 2, 15, 43856], [0, 2, 5, 19296],
            [4, 1, 25, 42352], [0, 2, 13, 42352], [0, 2, 2, 21088], [3, 1, 21, 59696], [0, 2, 9, 55632], [7, 1, 30, 23208],
            [0, 2, 17, 22176], [0, 2, 6, 38608], [5, 1, 27, 19176], [0, 2, 15, 19152], [0, 2, 3, 42192], [4, 1, 23, 53864],
            [0, 2, 11, 53840], [8, 1, 31, 54568], [0, 2, 18, 46400], [0, 2, 7, 46752], [6, 1, 28, 38608], [0, 2, 16, 38320],
            [0, 2, 5, 18864], [4, 1, 25, 42168], [0, 2, 13, 42160], [10, 2, 2, 45656], [0, 2, 20, 27216], [0, 2, 9, 27968],
            [6, 1, 29, 44448], [0, 2, 17, 43872], [0, 2, 6, 38256], [5, 1, 27, 18808], [0, 2, 15, 18800], [0, 2, 4, 25776],
            [3, 1, 23, 27216], [0, 2, 10, 59984], [8, 1, 31, 27432], [0, 2, 19, 23232], [0, 2, 7, 43872], [5, 1, 28, 37736],
            [0, 2, 16, 37600], [0, 2, 5, 51552], [4, 1, 24, 54440], [0, 2, 12, 54432], [0, 2, 1, 55888], [2, 1, 22, 23208],
            [0, 2, 9, 22176], [7, 1, 29, 43736], [0, 2, 18, 9680], [0, 2, 7, 37584], [5, 1, 26, 51544], [0, 2, 14, 43344],
            [0, 2, 3, 46240], [4, 1, 23, 46416], [0, 2, 10, 44368], [9, 1, 31, 21928], [0, 2, 19, 19360], [0, 2, 8, 42416],
            [6, 1, 28, 21176], [0, 2, 16, 21168], [0, 2, 5, 43312], [4, 1, 25, 29864], [0, 2, 12, 27296], [0, 2, 1, 44368],
            [2, 1, 22, 19880], [0, 2, 10, 19296], [6, 1, 29, 42352], [0, 2, 17, 42208], [0, 2, 6, 53856], [5, 1, 26, 59696],
            [0, 2, 13, 54576], [0, 2, 3, 23200], [3, 1, 23, 27472], [0, 2, 11, 38608], [11, 1, 31, 19176], [0, 2, 19, 19152],
            [0, 2, 8, 42192], [6, 1, 28, 53848], [0, 2, 15, 53840], [0, 2, 4, 54560], [5, 1, 24, 55968], [0, 2, 12, 46496],
            [0, 2, 1, 22224], [2, 1, 22, 19160], [0, 2, 10, 18864], [7, 1, 30, 42168], [0, 2, 17, 42160], [0, 2, 6, 43600],
            [5, 1, 26, 46376], [0, 2, 14, 27936], [0, 2, 2, 44448], [3, 1, 23, 21936], [0, 2, 11, 37744], [8, 2, 1, 18808],
            [0, 2, 19, 18800], [0, 2, 8, 25776], [6, 1, 28, 27216], [0, 2, 15, 59984], [0, 2, 4, 27424], [4, 1, 24, 43872],
            [0, 2, 12, 43744], [0, 2, 2, 37600], [3, 1, 21, 51568], [0, 2, 9, 51552], [7, 1, 29, 54440], [0, 2, 17, 54432],
            [0, 2, 5, 55888], [5, 1, 26, 23208], [0, 2, 14, 22176], [0, 2, 3, 42704], [4, 1, 23, 21224], [0, 2, 11, 21200],
            [8, 1, 31, 43352], [0, 2, 19, 43344], [0, 2, 7, 46240], [6, 1, 27, 46416], [0, 2, 15, 44368], [0, 2, 5, 21920],
            [4, 1, 24, 42448], [0, 2, 12, 42416], [0, 2, 2, 21168], [3, 1, 22, 43320], [0, 2, 9, 26928], [7, 1, 29, 29336],
            [0, 2, 17, 27296], [0, 2, 6, 44368], [5, 1, 26, 19880], [0, 2, 14, 19296], [0, 2, 3, 42352], [4, 1, 24, 21104],
            [0, 2, 10, 53856], [8, 1, 30, 59696], [0, 2, 18, 54560], [0, 2, 7, 55968], [6, 1, 27, 27472], [0, 2, 15, 22224],
            [0, 2, 5, 19168], [4, 1, 25, 42216], [0, 2, 12, 42192], [0, 2, 1, 53584], [2, 1, 21, 55592], [0, 2, 9, 54560]
        ],
        //是否闰年
        isLeapYear: function (year) {
            return ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0));
        },
        //天干地支年
        lunarYear: function (year) {
            var gan = ['庚', '辛', '壬', '癸', '甲', '乙', '丙', '丁', '戊', '己'],
                zhi = ['申', '酉', '戌', '亥', '子', '丑', '寅', '卯', '辰', '巳', '午', '未'],
                str = year.toString().split("");
            return gan[str[3]] + zhi[year % 12];
        },
        //生肖年
        zodiacYear: function (year) {
            var zodiac = ['猴', '鸡', '狗', '猪', '鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊'];
            return zodiac[year % 12];
        },
        //公历月份天数
        //@param year 阳历-年
        //@param month 阳历-月
        solarMonthDays: function (year, month) {
            var FebDays = this.isLeapYear(year) ? 29 : 28;
            var monthHash = ['', 31, FebDays, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
            return monthHash[month];
        },
        //农历月份天数
        lunarMonthDays: function (year, month) {
            var monthData = this.lunarMonths(year);
            return monthData[month - 1];
        },
        //农历月份天数数组
        lunarMonths: function (year) {
            var yearData = this.lunarInfo[year - this.MIN_YEAR];
            var leapMonth = yearData[0];
            var bit = (+yearData[3]).toString(2);
            var months = [];
            for (var i = 0; i < bit.length; i++) {
                months[i] = bit.substr(i, 1);
            }

            for (var k = 0, len = 16 - months.length; k < len; k++) {
                months.unshift('0');
            }

            months = months.slice(0, (leapMonth == 0 ? 12 : 13));
            for (var i = 0; i < months.length; i++) {
                months[i] = +months[i] + 29;
            }
            return months;
        },
        //农历每年的天数
        //@param year 农历年份
        lunarYearDays: function (year) {
            var monthArray = this.lunarYearMonths(year);
            var len = monthArray.length;
            return (monthArray[len - 1] == 0 ? monthArray[len - 2] : monthArray[len - 1]);
        },
        //
        lunarYearMonths: function (year) {
            var monthData = this.lunarMonths(year);
            var res = [];
            var temp = 0;
            var yearData = this.lunarInfo[year - this.MIN_YEAR];
            var len = (yearData[0] == 0 ? 12 : 13);
            for (var i = 0; i < len; i++) {
                temp = 0;
                for (j = 0; j <= i; j++) {
                    temp += monthData[j];
                }
                res.push(temp);
            }
            return res;
        },
        //获取闰月
        //@param year 农历年份
        leapMonth: function (year) {
            var yearData = this.lunarInfo[year - this.MIN_YEAR];
            return yearData[0];
        },
        //计算农历日期与正月初一相隔的天数
        betweenLunarDays: function (year, month, day) {
            var yearMonth = this.lunarMonths(year);
            var res = 0;
            for (var i = 1; i < month; i++) {
                res += yearMonth[i - 1];
            }
            res += day - 1;
            return res;
        },
        //计算2个阳历日期之间的天数
        //@param year 阳历年
        //@param month
        //@param day
        //@param l_month 阴历正月对应的阳历月份
        //@param l_day   阴历初一对应的阳历天
        betweenSolarDays: function (year, month, day, l_month, l_day) {
            var time1 = new Date(year + "-" + month + "-" + day).getTime(),
                time2 = new Date(year + "-" + l_month + "-" + l_day).getTime();
            return Math.ceil((time1 - time2) / 24 / 3600 / 1000);
        },
        //根据距离正月初一的天数计算阴历日期
        //@param year 阳历年
        //@param between 天数
        lunarByBetween: function (year, between) {
            var lunarArray = [], yearMonth = [], t = 0, e = 0, leapMonth = 0, m = '';
            if (between == 0) {
                t = 1;
                e = 1;
                m = '正月';
            } else {
                year = between > 0 ? year : (year - 1);
                yearMonth = this.lunarYearMonths(year);
                leapMonth = this.leapMonth(year);
                between = between > 0 ? between : (this.lunarYearDays(year) + between);
                for (var i = 0; i < 13; i++) {
                    if (between == yearMonth[i]) {
                        t = i + 2;
                        e = 1;
                        break;
                    } else if (between < yearMonth[i]) {
                        t = i + 1;
                        e = between - ((yearMonth[i - 1]) ? yearMonth[i - 1] : 0) + 1;
                        break;
                    }
                }

                m = (leapMonth != 0 && t == leapMonth + 1)
                    ? ('闰'.this.chineseMonth(t - 1))
                    : this.chineseMonth(((leapMonth != 0 && leapMonth + 1 < t) ? (t - 1) : t));
            }
            lunarArray.push(year, t, e); //年 月 日
            lunarArray.push(this.lunarYear(year),
                this.zodiacYear(year),
                m,
                this.chineseNumber(e)); //天干地支年 生肖年 月份 日
            lunarArray.push(leapMonth); //闰几月
            return lunarArray;
        },
        //中文月份
        chineseMonth: function (month) {
            var monthHash = ['', '正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'];
            return monthHash[month];
        },
        //中文日期
        chineseNumber: function (num) {
            var dateHash = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
            if (num <= 10) {
                res = '初' + dateHash[num];
            } else if (num > 10 && num < 20) {
                res = '十' + dateHash[num - 10];
            } else if (num == 20) {
                res = "二十";
            } else if (num > 20 && num < 30) {
                res = "廿" + dateHash[num - 20];
            } else if (num == 30) {
                res = "三十";
            }
            return res;
        },
        //转换农历
        toLunar: function (year, month, day) {
            var yearData = this.lunarInfo[year - this.MIN_YEAR];
            if (year == this.MIN_YEAR && month <= 2 && day <= 9) {
                return [1891, 1, 1, '辛卯', '兔', '正月', '初一'];
            }
            return this.lunarByBetween(year, this.betweenSolarDays(year, month, day, yearData[1], yearData[2]));
        },
        //转换公历
        //@param year  阴历-年
        //@param month 阴历-月，闰月处理：例如如果当年闰五月，那么第二个五月就传六月，相当于阴历有13个月
        //@param date  阴历-日
        toSolar: function (year, month, day) {
            var yearData = this.lunarInfo[year - this.MIN_YEAR];
            var between = this.betweenLunarDays(year, month, day);
            var ms = new Date(year + "-" + yearData[1] + "-" + yearData[2]).getTime();
            var s = ms + between * 24 * 60 * 60 * 1000;
            var d = new Date();
            d.setTime(s);
            year = d.getFullYear();
            month = d.getMonth() + 1;
            day = d.getDate();
            month = month > 9 ? month : "0" + month
            day = day > 9 ? day : "0" + day
            return year + "-" + month + "-" + day;
        }
    };
</script>
<script>
    var goOffWorkTime = "" // 下班时间
    var payOffTime = "" // 发工资时间
    var workDay = 5 // 上班天数
    var tip = "钱是老板的，命是自己的!早安，摸鱼人！工作再忙也记得把鱼摸了！有事没事起身去茶水间、厕所、走廊、前台、阳台、楼下小卖部逛逛。"
    var custom = [] // 自定义 {"title":"标题","type":"date","value":"10"} 每月10号,{"title":"标题","type":"time","value":"10:30"} 每天10点半
    var title = "摸鱼日记"
    var backgroundImage = ""
    var fontColor = "#ffffff"
</script>
<script>
    // 设置背景图片
    // document.getElementsByTagName("body")[0].style.backgroundImage = "url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg')"
    // 设置字体颜色
    // document.getElementsByTagName("body")[0].style.color = "#fff59d"


    const CACHE_KEY = 'moyusettings'

    // 获取配置
    if (!window.utools.dbStorage.getItem(CACHE_KEY)) {
        tempSaveCustom()
        let setObj = { "goOffWorkTime": "18:00", "payOffTime": "10", "tip": tip, "workDay": workDay, "custom": custom, "title": title, "backgroundImage": backgroundImage, "fontColor": fontColor }
        window.utools.dbStorage.setItem(CACHE_KEY, JSON.stringify(setObj))
    }
    window.utools.onPluginEnter(enter => {
        if (enter.code === CACHE_KEY) {
            document.getElementById("main").style.display = "none"
            document.getElementById("settings").style.display = "block"
            let settings = window.utools.dbStorage.getItem(CACHE_KEY)
            debug(settings)
            let setJson = JSON.parse(settings)
            document.getElementById("hour").value = parseInt(setJson.goOffWorkTime.split(":")[0])
            document.getElementById("min").value = parseInt(setJson.goOffWorkTime.split(":")[1])
            document.getElementById("date").value = parseInt(setJson.payOffTime)
            document.getElementById("tipText").innerHTML = setJson.tip ? setJson.tip : tip
            document.getElementById("workDay").value = parseInt(setJson.workDay ? setJson.workDay : workDay)
            custom = setJson.custom ? setJson.custom : custom
            document.getElementById("title").value = setJson.title ? setJson.title : title
            document.getElementById("backgroundImage").value = setJson.backgroundImage ? setJson.backgroundImage : backgroundImage
            document.getElementById("fontColor").value = setJson.fontColor ? setJson.fontColor : fontColor
            renderCustom()

            document.getElementById("saveBtn").style.opacity = 0.2
        } else {
            console.log("start load cache");
            document.getElementById("main").style.display = "block"
            document.getElementById("settings").style.display = "none"
            let settings = window.utools.dbStorage.getItem(CACHE_KEY)
            if (settings) {
                let date = new Date()
                let setObj = JSON.parse(settings)
                goOffWorkTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + setObj.goOffWorkTime + ":00"
                let payOff = parseInt(setObj.payOffTime)
                if (payOff < date.getDate()) {
                    // 本月已发，计算下个月
                    let currentMonth = date.getMonth() + 1
                    let currentYear = date.getFullYear()
                    if (currentMonth < 12) {
                        currentMonth++
                    } else {
                        currentMonth = 1
                        currentYear++
                    }
                    payOffTime = currentYear + "-" + (currentMonth > 9 ? currentMonth : "0" + currentMonth) + "-" + (payOff > 9 ? payOff : "0" + payOff)
                } else {
                    payOffTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (payOff > 9 ? payOff : "0" + payOff)
                }
                tip = setObj.tip ? setObj.tip : tip
                workDay = parseInt(setObj.workDay ? setObj.workDay : workDay)
                custom = setObj.custom ? setObj.custom : custom
                title = setObj.title ? setObj.title : title
                backgroundImage = setObj.backgroundImage ? setObj.backgroundImage : backgroundImage
                fontColor = setObj.fontColor ? setObj.fontColor : fontColor
            }
            init()
        }
    })

    // 保存配置
    function saveSetting() {
        debug("saveSetting...")
        let hour = parseInt(document.getElementById("hour").value)
        let min = parseInt(document.getElementById("min").value)
        let date = parseInt(document.getElementById("date").value)
        let workDay = document.getElementById("workDay").value
        let tip = document.getElementById("tipText").value
        let title = document.getElementById("title").value
        let backgroundImage = document.getElementById("backgroundImage").value
        let fontColor = document.getElementById("fontColor").value
        debug("setting...")
        let setObj = { "goOffWorkTime": (hour > 9 ? hour : "0" + hour) + ":" + (min > 9 ? min : "0" + min), "payOffTime": date > 9 ? date : "0" + date, "tip": tip, "workDay": workDay, "custom": custom, "title": title, "backgroundImage": backgroundImage, "fontColor": fontColor }
        debug("setObj:" + JSON.stringify(setObj))
        window.utools.dbStorage.setItem(CACHE_KEY, JSON.stringify(setObj))
        document.getElementById("saveBtn").style.opacity = 0.2
        debug(window.utools.dbStorage.getItem(CACHE_KEY))
    }

    // 监听值的变化1
    function change(e) {
        if (document.getElementById("hour").value > 0 && document.getElementById("hour").value < 24 &&
            document.getElementById("min").value >= 0 && document.getElementById("min").value < 60 &&
            document.getElementById("date").value > 0 && document.getElementById("date").value <= 31 &&
            document.getElementById("workDay").value > 0 && document.getElementById("workDay").value <= 7 &&
            isSaveCust()) {
            document.getElementById("saveBtn").style.opacity = 1.0
        } else {
            document.getElementById("saveBtn").style.opacity = 0.2
        }
    }

    //  通用监听值变化
    function commonChange(e) {
        document.getElementById("saveBtn").style.opacity = 1.0
    }

    // 校验自定义参数是否需要保存
    function isSaveCust() {
        console.log("isSaveCust", custom);
        tempSaveCustom()
        let isSave = (custom.length > 0 && custom.every(o => o.title && o.value)) || custom.length === 0;
        if (isSave) {
            return true;
        }
        return false;
    }

    // 临时保存一下custom
    function tempSaveCustom() {
        console.log("tempSaveCustom...");
        for (let index = 0; index < custom.length; index++) {
            let element = custom[index];
            element.title = document.getElementById(`title-${element.id}`).value
            if (element.type === "date") {
                element.value = document.getElementById(`day-${element.id}`).value;
            }
            if (element.type === "time") {
                let hour = document.getElementById(`hour-${element.id}`).value;
                let minute = document.getElementById(`minute-${element.id}`).value;
                if (hour && minute) {
                    element.value = hour + ":" + minute
                }
            }
            if (element.type === "day") {
                let month = document.getElementById(`month-${element.id}`).value;
                let day = document.getElementById(`day-${element.id}`).value;
                if (month && day) {
                    element.value = month + "-" + day
                }
            }
            if (element.type === "day2") {
                let month = document.getElementById(`month-${element.id}`).value;
                let day = document.getElementById(`day-${element.id}`).value;
                if (month && day) {
                    element.value = month + "-" + day
                }
            }
            console.log("save custom", element);
        }
        console.log("current custom", custom);
    }

    // 监听输入框值变化
    function textChange(e) {
        document.getElementById("saveBtn").style.opacity = 1.0
    }

    // debug日志
    function debug(msg) {
        // document.getElementById("set").innerHTML = msg
        // document.getElementById("set1").innerHTML = msg
    }

    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(), //day
            "h+": this.getHours(), //hour
            "m+": this.getMinutes(), //minute
            "s+": this.getSeconds(), //second
            "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
            "S": this.getMilliseconds() //millisecond
        }
        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o) if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
                RegExp.$1.length == 1 ? o[k] :
                    ("00" + o[k]).substr(("" + o[k]).length));
        return format;

    }

    //字符串转日期格式，strDate要转为日期格式的字符串
    function getDate(strDate) {
        var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/,
            function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
        return date;
    }

    // 指定时间转换为时间戳
    function toTimeStamp(dateString) {
        // dateString例如:'2022-03-05'
        // 例如返回:1646611200000
        return new Date(dateString) - 0
    }

    // 计算两个日期距离的天数
    function getDistanceDays(date1, date2) {
        // date1例如:'2022-03-05',date2例如:'2022-03-06'
        const date1_timeStamp = toTimeStamp(date1)
        const date2_timeStamp = toTimeStamp(date2)
        let max = '', min = ''
        // if (date1_timeStamp > date2_timeStamp) {
        //     max = date1_timeStamp
        //     min = date2_timeStamp
        // } else {
        //     max = date2_timeStamp
        //     min = date1_timeStamp
        // }
        min = date1_timeStamp
        max = date2_timeStamp
        // 例如返回:'1'
        return Math.round((max - min) / (24 * 60 * 60 * 1000)) - 1
    }

    function getWeek() {
        var str = "";
        var week = new Date().getDay();
        if (week == 0) {
            str = "星期日";
        } else if (week == 1) {
            str = "星期一";
        } else if (week == 2) {
            str = "星期二";
        } else if (week == 3) {
            str = "星期三";
        } else if (week == 4) {
            str = "星期四";
        } else if (week == 5) {
            str = "星期五";
        } else if (week == 6) {
            str = "星期六";
        }
        return str
    }

    function numberToString(number) {
        if (number.match(/\D/) || number.length >= 14) return;
        let zhArray = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']; // 数字对应中文
        let baseArray = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万']; //进位填充字符，第一位是 个位，可省略
        let string = String(number).split('').reverse().map((item, index) => { // 把数字切割成数组并倒序排列，然后进行遍历转成中文
            // 如果当前位为0，直接输出数字， 否则输出 数字 + 进位填充字符
            item = Number(item) == 0 ? zhArray[Number(item)] : zhArray[Number(item)] + baseArray[index];
            return item;
        }).reverse().join(''); // 倒叙回来数组，拼接成字符串
        string = string.replace(/^一十/, '十');  // 如果以 一十 开头，可省略一
        string = string.replace(/零+/, '零');  // 如果有多位相邻的零，只写一个即可
        return string;
    }

    //  获取农历
    function getChineseDate(time) {
        let date = time ? new Date(time) : new Date();
        dateString = date.toLocaleString('zh-CN-u-ca-chinese');
        dateString = dateString.replace(/(\d+)\s*?年/, (x, y) => {
            let result = '';
            result = "甲乙丙丁戊己庚辛壬癸".charAt((y - 4) % 10); // 天干
            result += "子丑寅卯辰巳午未申酉戌亥".charAt((y - 4) % 12); // 地支
            return result;
        });
        dateString = dateString.split(' ')[0]; // 取年月日
        let g = dateString.substr(0, 2) + '年';
        let m = dateString.substring(2, dateString.match('月').index) + '月';
        let d = dateString.match(/\d+/)[0];
        d = d < 11 ? '初' + numberToString(d) : numberToString(d);
        let animals = ["猴", "鸡", "狗", "猪", "鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊"];
        let index = date.toLocaleString('zh-CN-u-ca-chinese').substr(0, 4) % 12;
        let a = animals[index];
        return {
            g, // 干支
            m, // 月
            d, // 日
            a  // 生肖
        };
    }

    // 获取当天时间
    function getCurrentDay() {
        let date = new Date();
        let { g, m, d, a } = getChineseDate()
        let dayStr = date.getFullYear() + "年" + (date.getMonth() + 1) + '月' + date.getDate() + '日, ' + getWeek() + " " + g + " " + m + " " + d + " " + a + "年"
        return dayStr;
    }


    // 添加自定义 type: date|time
    function addCustom(type) {
        console.log("添加自定义设置");
        if (type == 'date') {
            custom.push({ "title": "", "type": "date", "value": "", "id": new Date().getTime() })
        }
        if (type == 'time') {
            custom.push({ "title": "", "type": "time", "value": "", "id": new Date().getTime() })
        }
        if (type == 'day') {
            custom.push({ "title": "", "type": "day", "value": "", "id": new Date().getTime() })
        }
        if (type == 'day2') {
            custom.push({ "title": "", "type": "day2", "value": "", "id": new Date().getTime() })
        }
        console.log("custom", custom);
        renderCustom()
    }

    // 删除自定义
    function deleteCust(custId) {
        tempSaveCustom()
        console.log("deleteCust", custId);
        custom = custom.filter(o => o.id !== custId)
        renderCustom()
        saveSetting()
    }

    // 向上移动
    function moveTop(custId) {
        let index = custom.findIndex(o => o.id === custId);
        console.log("moveTop", index);
        if (index > 0) {
            let lastIndex = index - 1;
            let lastItem = custom[lastIndex];
            let currentItem = custom[index];
            custom[lastIndex] = currentItem
            custom[index] = lastItem
        } else if (index == 0 && custom.length > 1) {
            let lastIndex = custom.length - 1;
            let lastItem = custom[lastIndex];
            let currentItem = custom[index];
            custom[lastIndex] = currentItem
            custom[index] = lastItem
        }
        renderCustom()
        saveSetting()
    }

    // 渲染
    function renderCustom() {
        let custHtml = "";
        for (let index = 0; index < custom.length; index++) {
            const cust = custom[index];
            console.log("cust", cust);
            if (cust.type == 'date') {
                custHtml += `<div class="my-2"><input type="text" id="title-${cust.id}" value="${cust.title}" oninput="change(event)">：每月 <input type="number" id="day-${cust.id}" value="${cust.value}" oninput="change(event)"> 号 <span style='color:#d50000;cursor: pointer;' onclick='deleteCust(${cust.id})'>删除</span> <span style='color:#00b0ff;cursor: pointer;' onclick='moveTop(${cust.id})'>向上移动</span></div>`
            }
            if (cust.type == 'time') {
                custHtml += `<div class="my-2"><input type="text" id="title-${cust.id}" value="${cust.title}" oninput="change(event)">：每天 <input type="number" id="hour-${cust.id}" value="${cust.value ? cust.value.split(":")[0] : ''}" oninput="change(event)"> 点 <input type="number"
                    id="minute-${cust.id}" value="${cust.value ? cust.value.split(":")[1] : ''}" oninput="change(event)"> 分 <span style='color:#d50000;cursor: pointer;' onclick='deleteCust(${cust.id})'>删除</span> <span style='color:#00b0ff;cursor: pointer;' onclick='moveTop(${cust.id})'>向上移动</span></div>`
            }
            if (cust.type == 'day') {
                custHtml += `<div class="my-2"><input type="text" id="title-${cust.id}" value="${cust.title}" oninput="change(event)">：阳历每年 <input type="number" id="month-${cust.id}" value="${cust.value ? cust.value.split("-")[0] : ''}" oninput="change(event)"> 月 <input type="number"
                    id="day-${cust.id}" value="${cust.value ? cust.value.split("-")[1] : ''}" oninput="change(event)"> 日 <span style='color:#d50000;cursor: pointer;' onclick='deleteCust(${cust.id})'>删除</span> <span style='color:#00b0ff;cursor: pointer;' onclick='moveTop(${cust.id})'>向上移动</span></div>`
            }
            if (cust.type == 'day2') {
                custHtml += `<div class="my-2"><input type="text" id="title-${cust.id}" value="${cust.title}" oninput="change(event)">：阴历每年 <input type="number" id="month-${cust.id}" value="${cust.value ? cust.value.split("-")[0] : ''}" oninput="change(event)"> 月 <input type="number"
                    id="day-${cust.id}" value="${cust.value ? cust.value.split("-")[1] : ''}" oninput="change(event)"> 日 <span style='color:#d50000;cursor: pointer;' onclick='deleteCust(${cust.id})'>删除</span> <span style='color:#00b0ff;cursor: pointer;' onclick='moveTop(${cust.id})'>向上移动</span></div>`
            }
        }
        document.getElementById("custBox").innerHTML = custHtml
    }

    // 首页渲染自定义设置 type: date|time
    function renderCustHtml(currentDate, desc) {
        let custs = custom;

        for (let index = 0; index < custs.length; index++) {
            const cust = custs[index];
            if (cust.type === "date") {
                let dateDesc = formateDateByDay(cust.value)
                let diffDay = getDistanceDays(currentDate, dateDesc)
                console.log("cust date diffDay", diffDay, currentDate, dateDesc);
                if (diffDay > 0) {
                    desc += "<div class='line'>距离" + cust.title + "还有：<span class='flashing'>" + diffDay + "</span> 天<br/></div>"
                } else if (diffDay === 0) {
                    desc += "<span class='flashing'>明天到" + cust.title + "日期啦！</span>"
                } else if (diffDay === -1) {
                    desc += "<span class='flashing'>今天到" + cust.title + "日期啦！</span>"
                }
            }
            if (cust.type === "day") {
                let dateDesc = new Date().getFullYear() + "-" + cust.value
                let diffDay = getDistanceDays(currentDate, dateDesc)
                if (diffDay < -1) {
                    dateDesc = (new Date().getFullYear() + 1) + "-" + cust.value
                    diffDay = getDistanceDays(currentDate, dateDesc)
                }
                console.log("cust day diffDay", diffDay, currentDate, dateDesc);
                if (diffDay > 0) {
                    desc += "<div class='line'>距离" + cust.title + "还有：<span class='flashing'>" + diffDay + "</span> 天<br/></div>"
                } else if (diffDay === 0) {
                    desc += "<span class='flashing'>明天到" + cust.title + "日期啦！</span>"
                } else if (diffDay === -1) {
                    desc += "<span class='flashing'>今天到" + cust.title + "日期啦！</span>"
                }
            }
            if (cust.type === "day2") {
                let currentYear = new Date().getFullYear()
                let currentMonth = new Date().getMonth() + 1
                let leapMonth = Lunar.leapMonth(currentYear)

                let month = parseInt(cust.value.split("-")[0])
                let day = parseInt(cust.value.split("-")[1])
                if (leapMonth > 0 && (month > leapMonth || (month == leapMonth && currentMonth == leapMonth + 1))) {
                    month = parseInt(month) + 1
                }
                console.log("当前阴历时间", cust.value, currentYear, month, day);
                let solar = Lunar.toSolar(currentYear, month, day)
                let diffDay = getDistanceDays(currentDate, solar)
                if (diffDay < -1) {
                    solar = Lunar.toSolar(currentYear + 1, month, day)
                    diffDay = getDistanceDays(currentDate, solar)
                }
                console.log("当年是润几月：", leapMonth, solar);
                console.log("cust day diffDay", diffDay, currentDate, solar);
                if (diffDay > 0) {
                    desc += "<div class='line'>距离" + cust.title + "阳历：" + solar + " 还有：<span class='flashing'>" + diffDay + "</span> 天<br/></div>"
                } else if (diffDay === 0) {
                    desc += "<span class='flashing'>明天到" + cust.title + "日期啦！</span>"
                } else if (diffDay === -1) {
                    desc += "<span class='flashing'>今天到" + cust.title + "日期啦！</span>"
                }
            }
        }
        if (custs.some(o => o.type === 'time')) {
            setInterval(() => {
                let countDownTxt = ""
                for (let index = 0; index < custs.length; index++) {
                    const cust = custs[index];
                    if (cust.type === "time") {
                        let date = new Date();
                        let countDownTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + cust.value + ":00"
                        var countDownTimestamp = new Date(countDownTime).getTime();
                        var cuerrentTimtestamp = new Date().getTime();
                        if (countDownTimestamp < cuerrentTimtestamp) {
                            // countDownTxt += "<div>" + cust.title + "时间已经过咯<br/></div>"
                        } else {
                            let remainSec = parseInt((countDownTimestamp - cuerrentTimtestamp) / 1000)
                            remainHour = parseInt(remainSec / (60 * 60))
                            remainSec = parseInt(remainSec % (60 * 60))
                            remainMin = parseInt(remainSec / 60)
                            remainSec = parseInt(remainSec % (60))
                            countDownTxt += "<div class='flex align-center'>" + cust.title + "倒计时:" + (remainHour > 9 ? remainHour : "0" + remainHour) + ":" + (remainMin > 9 ? remainMin : "0" + remainMin) + ":<span class='sec'>" + (remainSec > 9 ? remainSec : "0" + remainSec) + "</span></div>"
                        }
                    }
                }
                document.getElementById("countDown").innerHTML = countDownTxt
            }, 1000)
        }
        return desc
    }

    // 将每月多少号 转换成日期 比如：10 转换成 2022-12-10
    function formateDateByDay(dayNum) {
        let date = new Date();
        let payOff = parseInt(dayNum)
        if (payOff < date.getDate()) {
            // 本月已发，计算下个月
            let currentMonth = date.getMonth() + 1
            let currentYear = date.getFullYear()
            if (currentMonth < 12) {
                currentMonth++
            } else {
                currentMonth = 1
                currentYear++
            }
            dayNum = currentYear + "-" + (currentMonth > 9 ? currentMonth : "0" + currentMonth) + "-" + (payOff > 9 ? payOff : "0" + payOff)
        } else {
            dayNum = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (payOff > 9 ? payOff : "0" + payOff)
        }
        return dayNum
    }

    // 初始化数据
    function init() {
        console.log("init");

        // 设置当天信息
        document.getElementById("today").innerHTML = getCurrentDay();

        // 设置tip
        document.getElementById("tip").innerHTML = tip;


        // 设置title
        document.getElementById("titleTxt").innerHTML = title;

        // 设置背景图片
        if (!!backgroundImage) {
            document.getElementsByTagName("body")[0].style.backgroundImage = "url('" + backgroundImage + "')"
        }

        // 设置字体颜色
        document.getElementsByTagName("body")[0].style.color = fontColor

        let jieri = [["元旦", "2023-01-01"], ["春节", "2023-01-21"], ["清明节", "2023-04-05"], ["劳动节", "2023-05-01"], ["端午节", "2023-06-22"], ["中秋节", "2023-09-29"], ["国庆节", "2023-10-01"]]

        //  获取当前时间
        let currentDate = new Date().format('yyyy-MM-dd');
        console.log(currentDate);

        // 计算节假日时间
        let desc = ""

        // goOffWorkTime下班时间
        // payOffTime 发工资时间
        if (goOffWorkTime) {
            setInterval(() => {
                let goOffWorkTxt = ""
                var goOffWorkTimestamp = new Date(goOffWorkTime).getTime();
                var cuerrentTimtestamp = new Date().getTime();
                // debug("goOffWorkTime" + goOffWorkTime + "-" + new Date(goOffWorkTime).getTime() + "--》" + new Date().getTime() + "---〉" + (goOffWorkTimestamp < cuerrentTimtestamp) + "--》" + (cuerrentTimtestamp - goOffWorkTimestamp))
                if (goOffWorkTimestamp < cuerrentTimtestamp) {
                    goOffWorkTxt = "已经下班咯<br/>"
                } else {
                    let remainSec = parseInt((goOffWorkTimestamp - cuerrentTimtestamp) / 1000)
                    // desc += "下班剩余时间:" + remainSec + "<br/>"
                    remainHour = parseInt(remainSec / (60 * 60))
                    remainSec = parseInt(remainSec % (60 * 60))
                    remainMin = parseInt(remainSec / 60)
                    remainSec = parseInt(remainSec % (60))
                    goOffWorkTxt = "下班倒计时:" + (remainHour > 9 ? remainHour : "0" + remainHour) + ":" + (remainMin > 9 ? remainMin : "0" + remainMin) + ":<span class='sec'>" + (remainSec > 9 ? remainSec : "0" + remainSec) + "</span>"
                }
                document.getElementById("goOffWorkTxt").innerHTML = goOffWorkTxt
            }, 1000)
        }
        if (payOffTime) {
            let diffDay = getDistanceDays(currentDate, payOffTime)
            console.log("发工资", diffDay);
            if (diffDay > 0) {
                desc += "<div class='line'>距离发工资还有：<span class='flashing'>" + getDistanceDays(currentDate, payOffTime) + "</span> 天<br/></div>"
            } else if (diffDay == 0) {
                desc += "<span class='flashing'>明天就发工资啦！</span>"
            } else if (diffDay == -1) {
                desc += "<span class='flashing'>今天就发工资啦！</span>"
            }

        }

        // 渲染自定义
        desc = renderCustHtml(currentDate, desc, "date")

        var week = new Date().getDay();
        let day = workDay - week
        if (day >= 0) {
            if (day === 0) {
                desc += "<br/><span class='flashing'>明天就放假咯，好好休息休息划划水吧</span><br/><br/>"
            } else {
                desc += "距离放假还有 <span class='tag'>" + day + "</span> 天<br/>"
            }
        }

        for (let index = 0; index < jieri.length; index++) {
            const item = jieri[index];
            console.log(item[0], item[1]);
            let diffDays = getDistanceDays(currentDate, item[1])
            console.log("diffDays", diffDays);
            if (diffDays == 0) {
                desc += "明天就是 " + item[0] + " 了<br/>"
            }
            if (diffDays == -1) {
                desc += "今天就是 " + item[0] + " 了<br/>"
            }
            if (diffDays > 0) {
                desc += "距离" + item[0] + "还有 <span class='tag'>" + diffDays + "</span> 天<br/>"
            }
        }

        document.getElementById("content").innerHTML = desc

    }



</script>

</html>